<template>
  <div class="tags flx-row">
    <div v-for="(item,index) in visitedViews" :key="item.value" class="items flex" :class="{active:isActive(item)}" @click="clickAction(item,index)" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)">
      <p>{{ item.title }}</p>
      <i v-if="item.title!=='首页'&&(item.selected||item.hover)" class="el-icon-close" @click.stop="closeAction(item,index)" @mouseenter="mouseenter2" @mouseleave="mouseleave2" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'TagsItem',
  props: {
    tmp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  watch: {
    $route() {
      this.addTags()
      // this.moveToCurrentTag()
      console.log('打印路由监听结果----', this.$route)
    }
  },
  created() {
  },
  mounted() {
    this.addTags()
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path
    },
    addTags() {
      const { meta } = this.$route
      if (meta.title) {
        // if (meta.title === '产品详情') return
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    mouseenter(item) {
      this.$set(item, 'hover', true)
    },
    mouseenter2($event) {
      $event.target.className = 'el-icon-error'
    },
    mouseleave(item) {
      this.$set(item, 'hover', false)
    },
    mouseleave2($event) {
      $event.target.className = 'el-icon-close'
    },
    clickAction(item, index) {
      if (item.path !== this.$route.path) { this.$router.push(item.path) }
    },
    async closeAction(item) {
      await this.$store.commit('tagsView/deleteTagsAction', item)
      if (this.isActive(item)) {
        this.toLastView(this.visitedViews, item)
      }
    },
    toLastView(visitedViews, item) {
      const lastView = visitedViews.slice(-1)[0]
      if (lastView) {
        this.$router.push(lastView.path)
      } else {
        this.$router.push('/')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tags {
  .items {
    cursor: pointer;
    margin-top: 10px;
    padding: 0px 20px;
    box-sizing: border-box;
    height: 34px;
    margin-right: 5px;
    line-height: 34px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    color: #303133;
    transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    .el-icon-close{
        margin-left: 5px;
        margin-top: 2px;
    }
    .el-icon-error{
        margin-left: 5px;
        margin-top: 2px;
        color: #d3d3d3;
    }
  }
  .active{
        border: 1px solid #f5222d;
        color: #f5222d;
        transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
   }
  .items:hover{
       color: #f5222d;
       transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
   }
}
</style>
